import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import img from '../../../assets/images/list/raygar-he-NS4PEnPK2zQ-unsplash.jpg'
import { CloseOutlined } from '@ant-design/icons'
import { Select } from 'antd'
import { TopicService } from '../../../transfer/service/TopicService'
import { useRecoilState } from 'recoil'
import { SubListMock, TopicListMock } from './mock'
import { replaceItemAtIndex, pushItem, removeItemAtIndex } from '../../../utils/RecoilFunctions'
import { TagsService } from '../../../transfer/service/TagsService'
import { SearchService } from '../../../transfer/service/SearchService'
const { Option } = Select

interface ISubCardProps {
    data: any
    index: number
}

export function SubCard(props: ISubCardProps) {
    const [maker, setMaker] = useState('')
    const [model, setModel] = useState('')
    const [location, setLocation] = useState('')
    const [tag, setTag] = useState('')
    const [tagList, setTagList] = useState<any>([])
    const [tags, setTags] = useState<any>([])
    const [desc, setDesc] = useState('')
    const [selectValue, setSelectValue] = useState('moren')
    const [topicList, setTopicList] = useRecoilState(TopicListMock)
    const [subList, setSubList] = useRecoilState(SubListMock)

    // 初始化专题列表
    useEffect(() => {
        new TopicService().getAllTopic().then(res => {
            setTopicList(res.data.data)
        })
    }, [])

    // 更新列表
    useEffect(() => {
        let temp: any
        temp = replaceItemAtIndex(subList, props.index, {
            userId: JSON.parse(localStorage.getItem('account') as any).id,
            cameraId: { maker: maker, model: model },
            imageUrl: props.data.url,
            hash: props.data.hash,
            location: location,
            width: props.data.width,
            height: props.data.height,
            intro: desc,
            focalLength: 0,
            aperture: 0,
            iso: 0,
            tags: tags,
            topics: [{ topicId: selectValue }]
        })
        setSubList(temp)
    }, [maker, model, location, tags, desc, selectValue])

    const updateTags = async (e: any) => {
        if (e.key == 'Enter') {
            if (tag != '') {
                new SearchService().get('tags', tag, 0, 1).then(res => {
                    if (res.data.data.length != 0 && res.data.data[0].title == tag) {
                        setTagList(pushItem(tagList, { title: tag }))
                        setTags(pushItem(tags, { tagId: res.data.data[0].id }))
                    } else {
                        new TagsService().createTags({ title: tag }).then(res => {
                            setTagList(pushItem(tagList, { title: tag }))
                            setTags(pushItem(tags, { tagId: res.data.data.id }))
                        })
                    }
                })
            }
            setTag('')
        }
    }

    return (
        <div className={style.card__container}>
            <div className={style.img}>
                <img src={'http://localhost:3000/' + props.data.url} />
            </div>
            <div className={style.camera}>
                <input
                    className={style.left}
                    type="text"
                    value={maker}
                    placeholder={'输入相机品牌'}
                    onChange={e => {
                        setMaker(e.target.value)
                    }}
                />
                <input
                    type="text"
                    value={model}
                    placeholder={'输入相机型号'}
                    onChange={e => {
                        setModel(e.target.value)
                    }}
                />
            </div>
            <div className={style.location}>
                <input
                    type="text"
                    value={location}
                    placeholder={'输入城市名或国家'}
                    onChange={e => {
                        setLocation(e.target.value)
                    }}
                />
            </div>

            {/* 专题 */}
            <div className={style.topic}>
                <Select
                    className={style.select}
                    bordered={false}
                    defaultValue={selectValue}
                    onChange={e => {
                        setSelectValue(e)
                    }}>
                    <Option value={'moren'}>请选择专题</Option>
                    {topicList.map((item: { id: string; title: string; state: boolean }, index) => {
                        return item.state ? (
                            <Option key={index} value={item.id}>
                                {item.title}
                            </Option>
                        ) : (
                            <Option key={index} value={item.id} disabled={true}>
                                {item.title}
                            </Option>
                        )
                    })}
                </Select>
            </div>
            <div className={style.tag}>
                {tagList.map((item: { title: string; id: number }, index: number) => {
                    return (
                        <div className={style.item} key={index}>
                            <span>{item.title}</span>
                            <CloseOutlined
                                className={style.item__icon}
                                onClick={() => {
                                    console.log(index)
                                    setTags(removeItemAtIndex(tags, index))
                                    setTagList(removeItemAtIndex(tagList, index))
                                }}
                            />
                        </div>
                    )
                })}
                <input
                    type="text"
                    value={tag}
                    placeholder={'输入标签，每输入完一个标签按回车键'}
                    onKeyDown={e => {
                        updateTags(e)
                    }}
                    onChange={e => {
                        setTag(e.target.value)
                    }}
                />
            </div>
            <div className={style.desc}>
                <textarea
                    rows={3}
                    placeholder={'输入图片简介'}
                    value={desc}
                    onChange={e => {
                        setDesc(e.target.value)
                    }}
                />
            </div>
        </div>
    )
}
